<script setup lang="ts">
// 导入类型、组件、接口、模块
import type { PostAuthPayloadType } from '@/api/auth/types'
import type { FormRules, FormInstance } from 'element-plus'

import { reactive, ref } from 'vue'

// 表单数据（切记切记切记 全部用我给的单词）
const formData = reactive<PostAuthPayloadType>({
	auth_name: '',
	path: '',
	type: 1,
	keep_alive: 0,
	component: '',
	pid: 0
})
const formRules = reactive<FormRules>({
	auth_name: [
		{ required: true, message: '权限名称必须', trigger: 'blur' },
		{ min: 2, max: 4, message: '权限名称至少2~4个字符', trigger: 'blur' }
	]
})

// 表单提交
const formRef = ref<FormInstance>()
const handleSubmit = () => {
	formRef.value?.validate((isSuccess) => {
		if (isSuccess) {
			console.log('立即创建：', formData)
		}
	})
}
const handleReset = () => {
	formRef.value!.resetFields()
}
</script>

<template>
	<el-card>
		<!-- 标题 -->
		<template #header>
			<span>权限创建</span>
			<el-button type="default" @click="$router.push('/auth')">返回</el-button>
		</template>
		<!-- 标题 -->

		<!-- 内容 -->
		<el-form label-width="80" size="large" :model="formData" :rules="formRules" ref="formRef">
			<el-form-item label="权限名称" prop="auth_name">
				<el-input placeholder="请输入权限名称" v-model="formData.auth_name" />
			</el-form-item>
			<el-form-item label="路由" prop="path">
				<el-input placeholder="请输入路由" v-model="formData.path" />
			</el-form-item>
			<el-form-item label="种类" prop="type">
				<el-radio-group v-model="formData.type">
					<el-radio :label="1" size="large" border>菜单</el-radio>
					<el-radio :label="2" size="large" border>按钮</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="组件缓存" prop="keep_alive">
				<el-switch
					v-model="formData.keep_alive"
					:active-value="0"
					:inactive-value="1"
					inline-prompt
					style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
					active-text="未缓存"
					inactive-text="已缓存"
				/>
			</el-form-item>
			<el-form-item label="组件路径" prop="component">
				<el-input placeholder="请输入组件路径" v-model="formData.component" />
			</el-form-item>
			<el-form-item label="所属权限" prop="pid">
				<el-select v-model="formData.pid" placeholder="默认顶级权限">
					<el-option label="默认顶级权限" :value="0"></el-option>
					<el-option label="后台首页" :value="1"></el-option>
					<el-option label="用户管理" :value="2"></el-option>
					<el-option label="权限管理" :value="3"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleSubmit">立即创建</el-button>
				<el-button type="default" @click="handleReset">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 内容 -->
	</el-card>
</template>

<style lang="scss" scoped>
.el-form {
	max-width: 600px;
}
</style>
